<!-- 找房 -->
<template>
  <div class="box">
    <div class="box-hheader">
      <div @click="fanhui">《返回</div>
      <div class="shanghai">
        <span>上海^</span>
        <input type="text" placeholder="搜索房子" />
      </div>
      <div @click="ditu">地图</div>
    </div>
    <div class="box-header">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <div class="box-bbody">
      <div class="box-box1" v-for="(item, index) in list" :key="(item, index)">
        <div class="box-img">
          <img
            :src="'http://47.102.145.189:8009' + item.houseImg"
            alt=""
            lazy-load
          />
        </div>
        <div class="box-shuju">
          <!-- <p>{{item.title}}</p>
                   <p>{{item.desc}}</p>
                   <p>{{item.tags[0]}}</p>
                   <p>{{item.price}}</p> -->
          <div>{{ item.desc }}</div>
          <div>{{ item.title }}</div>
          <div>{{ item.tags[0] }}</div>
          <div>{{ item.price }}</div>
          <!-- <div>{{item.title}}</div> -->
          <!-- <div>{{}}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [],
      value1: 0,
      value2: "a",
      value3: "p",
      option1: [
        { text: "区域", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "方式", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
      option3: [
        { text: "租金", value: "p" },
        { text: "好评排序", value: "u" },
        { text: "销量排序", value: "e" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ditu() {
      this.$router.push("/Detu");
    },
    fanhui() {
      this.$router.push("/Home");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // axios
    //   .get(
    //     "http://47.102.145.189:8009/houses?cityId=AREA%7C88cff55c-aaa4-e2e0&area=AREA%7C88cff55c-aaa4-e2e0&rentType=true&price=null&more=CHAR%7C76eb0532-8099-d1f4%2CFLOOR%7C1%2CAREA%7C88cff55c-aaa4-e2e0%2CORIEN%7C61e99445-e95e-7f37%2Ctrue&roomType=ROOM%7Cd1a00384-5801-d5cd&oriented=ORIEN%7C61e99445-e95e-7f37&characteristic=CHAR%7C76eb0532-8099-d1f4&floor=FLOOR%7C1&start=1&end=20"
    //   )
    //   .then((val) => {
    //     console.log(val.data.body);
    //     this.list = val.data.body;
    //   });
    axios.get("http://47.102.145.189:8009/houses").then((val) => {
      console.log(val.data.body.list);
      this.list = val.data.body.list;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  background: palegreen;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.box-hheader {
  width: 100%;
  height: 50px;
  background: rgb(199, 198, 198);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 0.1rem;
}
.shanghai {
  width: 75%;
  height: 70%;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shanghai span {
  width: 15%;
  // height: 30px;
  // background: greenyellow;
}
.shanghai input {
  width: 85%;
  height: 100%;
  outline: none;
  border: none;
  border-left: 1px solid #ccc;
}
.box-header {
  width: 100%;
  height: 1.3rem;
  background: #ccc;
  // font-size: 10px;
}
// .van-dropdown-menu {
//   width: 100%;
//   height: 0.8rem;
//   font-size: 10px;
// }
// .van-dropdown-menu__bar {
//   width: 100%;
//   height: 0.8rem;
//   font-size: 10px;
// }
.box-bbody {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  background: #fff;
}
.box-box1 {
  width: 100%;
  height: 2rem;
  border: 1px solid #000;
  margin: 10px 0px;
}
</style>